<template>
	<view class="zai-box">
		<view style="text-align: center;" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
			<image src="../../static/logo.png" mode='aspectFit' class="zai-logo"></image>
			<view class="zai-title">信息分发系统</view>
		</view>
		<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">

			<view class="cu-form-group margin-top shadow-blur border">
				<!-- <view class="title">账号:</view> -->
				<input placeholder="用户名" name="input" autocomplete v-model="userName"></input>
			</view>
			<view class="cu-form-group margin-top shadow-blur border">
				<!-- <view class="title">密码:</view> -->
				<input placeholder="密   码" name="input" type="password" autocomplete v-model="password"></input>
			</view>
			<view class="remember-psw">
				<checkbox-group>
					<label>
						<checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw"
							color="#09CC86" />记住账号密码
					</label>
				</checkbox-group>
			</view>
			<view class="flex  flex-direction ">
				<button class="cu-btn bg-blue shadow-blur" :loading="loading" @tap="onLogin">
					{{loading ? "登录中...":"登 录"}}
				</button>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="padding flex flex-direction  text-center  ">
				当前版本:{{version}}
			</view>
			<!-- #endif -->

		</view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<!-- <image src="/static/login3.png" mode="aspectFit"></image> -->
			<view class="gray-text">登录中...</view>
		</view>
		<!-- <my-image-upload></my-image-upload>
		<my-select></my-select> -->
		<!-- <my-page></my-page> -->
	</view>

</template>

<script>
	import {
		ACCESS_TOKEN
	} from '@/common/util/constants.js'
	export default {
		components: {},
		data() {
			return {
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				rememberPsw: true
			};
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			var that = this
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});
			//页面加载完成，获取本地存储的用户名及密码
			const userName = uni.getStorageSync('userName');
			const password = uni.getStorageSync('password');
			console.log(userName,password)
			if (userName && password) {
				that.userName = userName;
				that.password = password;
			} else {
				that.userName = "";
				that.password = "";
			}
			// #endif
		},
		methods: {
			onLogin: function() {
				// uni.setStorage('ACCESS_TOKEN', 'hello');
				// this.$tip.success('登录成功!')
				// // this.$Router.replaceAll({name:'index'})
				// 	 uni.reLaunch({
				// 		url: '/pages/index/index'
				// 	  });
				if (!this.userName || this.userName.length == 0) {
					this.$tip.toast('请填写用户名');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请填写密码');
					return;
				}
				let loginParams = {
					username: this.userName,
					password: this.password
				}
				// debugger
				this.loading = true;
				this.$http.post("/Login", loginParams).then((res) => {
					console.log("mLogin", res)
					this.loading = false;
					if (res.data.token) {
						this.$tip.success('登录成功!');
						uni.setStorageSync(ACCESS_TOKEN, res.data.token);
						uni.setStorageSync("userInfo", res.data);
						// this.$Router.replaceAll({name:'index'})
						uni.reLaunch({
							url: '/pages/index/index'
						});
						//登录成功将用户名密码存储到用户本地
						if (this.rememberPsw) { //用户勾选“记住密码”
							uni.setStorageSync('userName', this.userName);
							uni.setStorageSync('password', this.password);
						} else { //用户没有勾选“记住密码”
							uni.removeStorageSync('userName');
							uni.removeStorageSync('password');
							this.userName = "";
							this.password = "";
						}
					} else {
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.$tip.alert(msg);
				}).finally(() => {
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.remember-psw{
		padding-top: 20px;
	}
	.login-paddingtop {
		margin-top: 100upx;
	}

	.zai-box {
		padding: 0 20 upx;
		padding-top: 100 upx;
		position: relative;
		// background-color: #3291F8;
		height: 100vh;

		.cu-btn {
			height: 100rpx;
			margin-top: 100rpx;
			border-radius: 8rpx;
			font-size: 40rpx;
			color: #fff;
			font-weight: 500;
		}
	}

	.zai-logo {
		margin-top: 200upx;
		width: 200upx;
		height: 200upx;
	}

	.zai-title {
		font-size: 72upx;
		font-weight: 600;
		color: #3291F8;
		text-align: center;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60 upx 0;
		text-align: center;
		font-size: 30 upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100 upx;
		font-size: 36 upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1 upx, 1 upx);
	}
</style>
